<template>
    <div style="background-color: #ffffff;">
        <el-row>
            <div style="float: left;height: 15px;">
                <el-checkbox-group v-model="checkboxGroup2" size="medium" @change="selectChange($event)">
                    <el-checkbox-button style="background-color: skyblue;" disabled label="客户:" key="客户:">
                        客户:
                    </el-checkbox-button>
                    <el-checkbox-button style="margin: 5px;" v-for="custom in customer" :label="custom" :key="custom">
                        {{ custom }}
                    </el-checkbox-button>
                    <el-tooltip effect="dark" content="刷新" placement="top">
                        <el-button icon="el-icon-refresh" circle @click="clearSelect()"></el-button>
                    </el-tooltip>
                    
                </el-checkbox-group>
            </div>
            <el-col :span="16">
                <div style="border: 1px solid greenyellow;height: 450px;width: 100%;margin-top: 45px;" id="chart1">
                </div>
            </el-col>
            <el-col :span="8">
                <div id="chart2"
                    style="border: 1px solid greenyellow;height: 450px;width: 100%;margin-top: 45px;text-align: center;">
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import $ from 'jquery';
import { getProjectLevelCount, getProjectCustom, getProjectLevelTest } from "@/api/business/project"
export default {
    name: 'Model1',
    data() {
        return {
            checkboxGroup2: [],
            customer: [
                // 'Acer', 'GBT', 'inno', 'IO', '泰坦'
            ],
            count: 1048,
            param: {
                customs: []
            }
        };
    },
    computed: {
    },
    watch: {
        checkboxGroup2: function (newVal, oldVal) {
            let ocount = oldVal.length
            let ncount = newVal.length
            // console.log('new',newVal,ncount)
            // console.log('old',oldVal,ocount)
            if (ocount == 1 && ncount == 0) {
                this.checkboxGroup2 = this.customer
            }
        }
    },
    created() {
        this.getProjectCustomerDate()
    },
    destroyed() {

    },
    mounted() {
        this.getProjectLevelDate()
        this.getProjectLevelTestDate();
    },
    methods: {
        initEChart1(date1) {

            var extension = function (mychart) {
                //判断是否创建过div框,如果创建过就不再创建了
                var id = document.getElementById("extension");
                if (!id) {
                    var div = "<div id = 'extension' sytle=\"display:none\"></div>";
                    $("html").append(div);
                }

                mychart.on("mouseover", function (params) {
                    if (params.componentType == "xAxis") {
                        $("#extension")
                            .css({
                                position: "absolute",
                                color: "#555",
                                border: "solid 1px #333",
                                "font-family": "Arial",
                                "font-size": "14px",
                                padding: "5px",
                                display: "inline",
                            })
                            .text(params.value);

                        $("html").mousemove(function (event) {
                            var xx = event.pageX - 30;
                            var yy = event.pageY + 20;
                            $("#extension").css("top", yy).css("left", xx);
                        });
                    }
                });

                mychart.on("mouseout", function (params) {
                    if (params.componentType == "xAxis") {
                        $("#extension").css("display", "none");
                    }
                });
            };

            var myChart1 = echarts.init(document.getElementById('chart1'))
            const option1 = {
                title: {
                    text: 'bug专案测试轮数排行榜(Top10)',
                    position: 'center',
                    left: 'center'
                },
                dataset: [
                    {
                        dimensions: ['name', 'score'],
                        source: date1 ? date1 : []
                        // [
                        //     ['Acer', 314],
                        //     ['GBT ', 351],
                        //     ['Acer ', 287],
                        //     ['GBT', 219],
                        //     ['inno', 253],
                        //     ['IO', 100],
                        //     ['inno ', 165],
                        //     ['泰坦/001', 318],
                        //     ['泰坦/002 ', 366],
                        //     ['IO ', 376]
                        // ]
                    },
                    {
                        transform: {
                            type: 'sort',
                            config: { dimension: 'score', order: 'desc' }
                        }
                    }
                ],
                xAxis: {
                    triggerEvent: true, // 开启坐标轴的标签响应和触发鼠标事件
                    type: 'category',
                    axisLabel: {
                        interval: 0,
                        rotate: 25,
                        formatter: function (value) {
                            var res = value;
                            if (res.length > 11) {
                                res = res.substring(0, 10) + "..";
                            }
                            return res;
                        },
                    },

                },
                yAxis: {},
                series: {
                    type: 'bar',
                    encode: { x: 'name', y: 'score' },
                    datasetIndex: 1,
                    label: {
                        show: true,
                        position: 'top',
                        valueAnimation: true
                    }
                }
            };

            myChart1.setOption(option1);
            extension(myChart1);
        },
        initEChart2(date1, date2) {

            var myChart2 = echarts.init(document.getElementById('chart2'))

            const option2 = {
                title: {
                    text: '项目专案异常结案状况统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '8%',
                    left: 'center',
                    data: date1 ? date1 : []
                    //  [
                    //     'A案',
                    //     'B案',
                    //     'C案',
                    //     'S案',
                    // ]
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: ['35%', '60%'],
                        data: date2 ? date2 : [],
                        // [
                        //     { value: 1048, name: `A案` },
                        //     { value: 735, name: 'B案' },
                        //     { value: 580, name: 'C案' },
                        //     { value: 484, name: 'S案' },
                        // ]
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                    }
                ]
            };

            // myChart1.setOption(option1);
            myChart2.setOption(option2);
        },
        getProjectLevelDate() {
            getProjectLevelCount().then(res => {
                //   console.log(res)
                const date1 = []
                const date2 = res.data
                for (let res of date2) {
                    date1.push(res.name)
                }
                this.initEChart2(date1, date2)
            })
        },
        getProjectCustomerDate() {
            getProjectCustom().then(res => {
                this.customer = res.data ? res.data : []
            })
        },
        // 销毁Echarts
        destoryChar1() {
            if (echarts.getInstanceByDom(document.getElementById('chart1'))) {
                echarts.dispose(document.getElementById('chart1'))
            }
        },
        getProjectLevelTestDate() {
            getProjectLevelTest(this.param).then(res => {
                // console.log(res)
                this.destoryChar1()
                this.initEChart1(res.data)
            })
        },
        selectChange(event) {
            // console.log(event)
            this.param.customs = event
            this.getProjectLevelTestDate()
        },
        clearSelect() {
            this.checkboxGroup2 = []
            this.param.customs = []
            this.getProjectLevelTestDate()
        }
    },
};
</script>

<style scoped></style>
